import React from 'react';
import { Toast, } from 'antd-mobile';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            type: 1,
            menu: [{
                title: '正在参与',
                id: 1,
            },{
                title: '已结束',
                id: 2,
            },],
			hasMore: true,
			data:[],
			action: STATS.init,
			page: 1,
        }
    }
	componentDidMount(){
        document.title = '我的活动'
        this.getList()
	}
	changeType(type){
		this.setState({
			type
		},()=>{
            this.getList()
        })
	}
	getList(){
		var req={
            page: 1,
            size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("user/myActive",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("user/myActive",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
            type: this.state.type,
        }
        global.Ajax.hhtc_request("user/myActive",req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className='act_list_box'>
                <div className='learn_tab learn_tab1' style={{position: 'fixed',left: 0,top: 0,right: 0,zIndex: 9,}}>
                    {this.state.menu.map((item,index)=>{
                        return(
                            <p key={'menu'+index} className={this.state.type===item.id?'active':''} onClick={this.changeType.bind(this,item.id)}>{item.title}</p>
                        )
                    })}
                </div>
                <ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
                    <div className='list'>
                        {this.state.data.map((item,index)=>{
                            return(
                                <div key={'list'+index} className='row' onClick={()=>{this.props.history.push('/page/home/user/activitydetail/'+item.id)}}>
                                    <img alt='' src={item.img} className='' />
                                    <div className='right'>
                                        <p className='title' style={{height:'20px'}}>{item.title}</p>
                                        <p className='writer'>讲师：{item.author}</p>
                                        <div className='time'>
                                            <img alt='' src={require('../../imgs/times.png')} />
                                            <p className='active'>{item.time}</p>
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
				</ReactPullLoad>
                {/* <div className='list'>
                    <div key={'list'+index} className='row' onClick={()=>{this.props.history.push('/page/home/user/activitydetail')}}>
                        <img alt='' src={require('../../imgs/banner.png')} className='' />
                        <div className='right'>
                            <p className='title'>2021年7月短视频拍摄概念艺术照活动</p>
                            <p className='writer'>讲师：唐宇</p>
                            <div className='time'>
                                <img alt='' src={require('../../imgs/times.png')} />
                                <p className='active'>05-12 15:30至05-12 16:30</p>
                            </div>
                        </div>
                    </div>
                    <div className='row'>
                        <img alt='' src={require('../../imgs/banner.png')} className='' />
                        <div className='right'>
                            <p className='title'>2021年7月短视频拍摄概念艺术照活动</p>
                            <p className='writer'>讲师：唐宇</p>
                            <div className='time'>
                                <img alt='' src={require('../../imgs/time1.png')} />
                                <p>05-12 15:30至05-12 16:30</p>
                            </div>
                        </div>
                    </div>
                </div> */}
			</div>
		)
	}
}
